<template>
    <el-breadcrumb v-if="childName" class="bread" separator-class="el-icon-arrow-right">
        <el-breadcrumb-item :to="{ name:'MainLayout' }">
        后台首页</el-breadcrumb-item>
        <el-breadcrumb-item>{{childName}}</el-breadcrumb-item>
    </el-breadcrumb>
</template>

<script>
    export default {
        name:"Breadcrumb",
        data() { 
            return {
                /**
                 * 子路由名称
                 */
                childName: "",
            }
        },
        methods: {
            /**
             * 获取路由信息
             */
            getRoute() {
                const path=this.$route.path.replace("/","");
                for(const parent of this.$store.getters.tree){
                   const child=parent.child.find((c)=>c.frontpath===path);
                   if(child){
                    this.childName=child.name==='后台首页'?"":child.name;
                    break;
                   }
                }
            }
        },
        watch:{
            /**
             * 监听当前路由信息
             */
            $route:{
              immediate:true,
              handler(){
                 this.getRoute();
              }
            },
        }
    }
</script>

<style lang="scss" scoped>
.bread{
    background: white;
    box-sizing: border-box;
    padding: 20px;
    border-bottom: 1px solid #dee2e6;
}
</style>